<template>
  <NavBar title="健康档案">
    <Form slot="main">
      <span class="records-span">* 以下为必填项</span>
      <div class="box">
        <!-- 名称 -->
        <Field
          v-model="userInfo.realname"
          name="名称"
          label="名称"
          placeholder="请输入名称"
          :rules="[{ message: '名称不能为空' }]"
        />
        <!-- 性别 -->
        <Field name="radio" label="性别">
          <template #input>
            <RadioGroup v-model="userInfo.gender" direction="horizontal">
              <Radio name="1">男</Radio>
              <Radio name="0">女</Radio>
            </RadioGroup>
          </template>
        </Field>
        <!-- 生日 -->
        <Field
          readonly
          clickable
          name="calendar"
          :value="getYYYYMM(userInfo.birthday)"
          label="出生日期"
          placeholder="请选择"
          @click="showCalendar = true"
        />
        <div class="picker" v-if="showCalendar">
          <DatetimePicker
            v-model="userInfo.birthday"
            @confirm="pickerConfirm"
            @cancel="pickerCancel"
            type="date"
            title="选择年月日"
            :max-date="maxDate"
            :min-date="minDate"
          />
        </div>
      </div>
      <span class="records-span">以下为选填项</span>
      <div class="box">
        <Field
          v-model="userInfo.phonenumber"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ pattern,message: '手机号格式不正确' }]"
        />
        <!-- 身份证 -->
        <Field
          v-model="userInfo.idcard"
          name="身份证"
          label="身份证"
          placeholder="请输入身份证"
          :rules="[{ pattern: pattern2,message: '身份证格式不正确' }]"
        />
        <!-- 身高 -->
        <Field
          readonly
          clickable
          name="height"
          :value="userInfo.height"
          label="身高"
          placeholder="请选择"
          @click="showHeightPicker = true"
        />
        <Popup v-model="showHeightPicker" position="bottom">
          <Picker
            show-toolbar
            :columns="heightList"
            @confirm="onConfirmH"
            @cancel="showHeightPicker = false"
            :default-index="150"
          />
        </Popup>
        <!-- 体重 -->
        <Field
          readonly
          clickable
          name="height"
          :value="userInfo.weight"
          label="体重"
          placeholder="请选择"
          @click="showWeightPicker = true"
        />
        <Popup v-model="showWeightPicker" position="bottom">
          <Picker
            show-toolbar
            :columns="weightList"
            @confirm="onConfirmW"
            @cancel="showWeightPicker = false"
            :default-index="50"
          />
        </Popup>
        <!-- 腰围 -->
        <Field
          readonly
          clickable
          name="width"
          :value="userInfo.teper"
          label="腰围"
          placeholder="请选择"
          @click="showWidthPicker = true"
        />
        <Popup v-model="showWidthPicker" position="bottom">
          <Picker
            show-toolbar
            :columns="widthList"
            @confirm="onConfirmWidth"
            @cancel="showWidthPicker = false"
            :default-index="80"
          />
        </Popup>
      </div>
      <div class="box" style="paddingBottom:16px">
        <div class="list" v-for="(item,index) in dataList" :key="index">
          <div class="title">{{item.title}}</div>
          <span
            v-for="(ite,ind) in item.tagList"
            :key="ind"
            @click="onClick(index,ite.name)"
            :class="item.active.indexOf(ite.name) !== -1 ? 'active' : ''"
          >{{ite.name}}</span>
        </div>
        <div style="margin: 16px 16px 0 16px;">
          <Button @click="onSubmitForm" round block type="info">提交</Button>
        </div>
      </div>
    </Form>
  </NavBar>
</template>

<script>
import dataList from './dataList';
import moment from 'moment';
import NavBar from '@/components/NavBar/navBar.vue'
import {
  Form,
  Field,
  RadioGroup,
  Radio,
  DatetimePicker,
  Popup,
  Picker,
  Button
} from 'vant';
import { getRecord, updateRecord } from '@/api/api'
export default {
  components: {
    Form,
    Field,
    RadioGroup,
    Radio,
    DatetimePicker,
    Popup,
    Picker,
    Button,
    NavBar
  },
  data() {
    return {
      userInfo: {
        realname: '荣晓菲',
        gender: '0',
        birthday: '2002-06-14T16:00:00.000Z',
        phonenumber: '15735151986',
        idcard: '140322199709172421',
        height: '150cm',
        weight: '50kg',
        teper: '80cm'
      },
      dataList: dataList,
      showCalendar: false,
      showPicker: false,
      showWidthPicker: false,
      showWeightPicker: false,
      showHeightPicker: false,
      maxDate: new Date(),
      minDate: new Date('1920-01-01'),
      pattern: /^1[3456789]\d{9}$/,
      pattern2: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
      heightList: Array.from({ length: 300 }, (i, index) => `${index}cm`),
      weightList: Array.from({ length: 200 }, (i, index) => `${index}kg`),
      widthList: Array.from({ length: 200 }, (i, index) => `${index}cm`),
      obj: {}
    };
  },
  async created() {
    const record = await getRecord()
    if (record.code === 200) {
      this.userInfo = record.data[0]
      this.userInfo.height = this.userInfo.height ? this.userInfo.height + 'cm' : ''
      this.userInfo.teper = this.userInfo.teper ? this.userInfo.teper + 'cm' : ''
      this.userInfo.weight = this.userInfo.weight ? this.userInfo.weight + 'kg' : ''
      // this.userInfo.gender =
      this.$set(this.userInfo, 'gender', this.userInfo.gender === undefined ? '' : this.userInfo.gender + '')
    }
    this.dataList.forEach(item => {
      if (item.only) {
        item.active.push(this.userInfo[item.key])
      } else {
        item.active = this.userInfo[item.key]
      }
      // item.active.push(item.tagList[0].name)
    })
  },
  methods: {
    getYYYYMM(date) {
      if (date) {
        return moment(date).format('YYYY-MM-DD');
      }
      return ''
    },
    pickerConfirm(e) {
      this.userInfo.birthday = new Date(e);
      this.showCalendar = false;
    },
    pickerCancel() {
      this.showCalendar = false;
    },
    onConfirmH(e) {
      this.userInfo.height = e;
      this.showHeightPicker = false;
    },
    onConfirmW(e) {
      this.userInfo.weight = e;
      this.showWeightPicker = false;
    },
    onConfirmWidth(e) {
      this.userInfo.teper = e;
      this.showWidthPicker = false;
    },
    onSubmitForm() {
      if (!this.userInfo.realname || !this.userInfo.gender || !this.userInfo.birthday) {
        this.$toast.fail('信息不完善')
        return
      }
      if (!this.pattern.test(this.userInfo.phonenumber) || !this.pattern2.test(this.userInfo.idcard)) {
        this.$toast.fail('信息不正确')
        return
      }
      this.obj.birthday = this.userInfo.birthday;
      this.obj.gender = +this.userInfo.gender;
      this.obj.realname = this.userInfo.realname;
      this.obj.idcard = this.userInfo.idcard;
      this.obj.phonenumber = this.userInfo.phonenumber;
      if (this.userInfo.height) {
        this.obj.height = this.userInfo.height.replace('cm', '')
      }
      if (this.userInfo.weight) {
        this.obj.weight = this.userInfo.weight.replace('kg', '')
      }
      if (this.userInfo.width) {
        this.obj.teper = this.userInfo.width.replace('cm', '')
      }
      this.dataList.map(item => {
        this.obj[item.key] = item.active;
      })
      updateRecord(this.obj).then(res => {
        if (res.code === 200) {
          this.$toast.success('修改成功')
          this.$router.replace('/home/mine')
        }
      })
    },
    onClick(index, name) {
      if (this.dataList[index].active.indexOf(name) == -1) {
        if (this.dataList[index].only) {
          this.dataList[index].active = [];
        }
        this.dataList[index].active.push(name);
      } else {
        this.dataList[index].active.splice(this.dataList[index].active.indexOf(name), 1);
      }
      // this.num++;
    }
  }
};
</script>

<style scoped lang='scss'>
@import "@/assets/scss/index.scss";
main {
  .picker {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    & > div {
      width: 100%;
    }
  }
  .records-span {
    width: 100%;
    padding-top: 0.1rem;
    font-size: $font-size-s;
    display: block;
    padding-left: 0.1rem;
  }
}
.box {
  background: #fff;
  margin-top: 0.1rem;
  .list {
    padding: 0.1rem 0;
    margin: 0 0.1rem;
    border-bottom: 1px solid #f5f5f5;
    .title {
      font-size: $font-size-m;
      padding-bottom: 0.2rem;
    }
    span {
      display: inline-block;
      font-size: $font-size-s;
      padding: 0.1rem 0.15rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      border-radius: 0.14rem;
      background: #f1f1f1;
      color: #656565;
      text-align: center;
    }
    .active {
      background: #6acf73;
      color: #fff;
    }
  }
}
</style>
